<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>权限管理系统</span>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="validateCode">
          <el-col :span="12"><el-input v-model="ruleForm.validateCode"></el-input></el-col>
          <el-col :span="12"
            >
            <img src="https://captcha.sunseeyou.com/captcha/dynamic?id=3&type=DEFAULT&font=Kaiti&textBold=true&t=Fri%20Jan%2012%202024%2014:51:32%20GMT+0800%20(%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4)">
            </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
/** 命名导入 */
import { Login } from '../apis/admin'
export default {
  name: 'RbacpermissionsystemUiLogin',

  data () {
    return {
      ruleForm: {
        userName: '',
        password: '',
        validateCode: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },

  mounted () {
  },

  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Login(this.ruleForm).then(m => {
            if (m.code > 0) {
              this.$message({
                message: m.message,
                type: 'warning'
              })
            } else {
              // jwt token存起来，LocalStorage,Cookie
              console.log(m.data)
              localStorage.setItem('token', m.data)
              this.$router.push('/Home')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style>
.login {
  width: 100%;
  height: 100%;
  background: #0c9790;
  overflow: hidden;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  margin: 0 auto;
  margin-top: 12em;
}
</style>
